<template>
  <div class="bottomnav">
    <ul>
      <li>
        <router-link to="/homeindex">
          <van-icon class="ico iconfont icon-dazhongdianping"></van-icon>
          <span>首页</span>
        </router-link>
      </li>
      <li>
        <router-link to="/mapindex">
          <van-icon name="map-marked" class="ico mapico" />
          <span>地图</span>
        </router-link>
      </li>
      <li id="add">
        <router-link to="/moreindex">
          <van-icon name="add" class="ico addico" v-orange />
        </router-link>
      </li>
      <li>
        <router-link to="/likeindex">
          <van-icon class="ico iconfont icon-shoucangxuanzhong"></van-icon>
          <span>收藏</span>
        </router-link>
      </li>
      <li>
        <router-link to="/mineindex">
          <van-icon class="ico iconfont icon-wode003"></van-icon>
          <span>我的</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  directives: {
    orange: {
      inserted(el) {
        el.style.color = "#fc5c3c";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bottomnav {
  position: absolute;
  padding-top: 2.133vw;
  bottom: 0;
  width: 100%;
  height: 16vw;
  background-color: #fff;
  a {
    color: rgb(139, 131, 131);
  }
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    li {
      display: flex;
      justify-content: space-around;
      align-items: center;

      ::v-deep .ico {
        font-size: 5.867vw;
      }
      ::v-deep .addico {
        font-size: 11.733vw;
      }
      ::v-deep .addico,
      ::v-deep .mapico,
      span {
        display: block;
      }
      span {
        font-size: 2.667vw;
      }
      .router-link-active {
        color: orangered;
      }
    }
    #add {
      align-self: start;
      flex-shrink: 1.2;
    }
  }
}
</style>